import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'media_search_controller.dart';

class MediaSearchPage extends StatelessWidget {
  final MediaSearchController controller = Get.put(MediaSearchController());
  final TextEditingController textController = TextEditingController();

  MediaSearchPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Container(
          height: 30, width: double.infinity,
          child: Obx(() {
            textController.text = controller.searchText.value;
            textController.selection = TextSelection.fromPosition(
              TextPosition(offset: textController.text.length),
            );
            return TextField(
              controller: textController,
              onChanged: (text) => controller.updateSearchText(text),
              decoration: InputDecoration(
                hintText: '请输入影片名称搜索',
                hintStyle: const TextStyle(color: Colors.black54),
                prefixIcon: const Icon(
                  Icons.search,
                  color: Colors.black54,
                  size: 20,
                ),
                suffix: controller.searchText.value.isNotEmpty
                    ? GestureDetector(
                  onTap: () => controller.clearSearchText(),
                  child: Container(
                    width: 16,
                    height: 16,
                    decoration: const BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.black12,
                    ),
                    child: const Icon(Icons.clear, color: Colors.black54, size: 10),
                  ),
                )
                    : null,
                filled: true,
                fillColor: Colors.white,
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8.0),
                  borderSide: BorderSide.none,
                ),
                contentPadding: const EdgeInsets.symmetric(vertical: 8, horizontal: 20),
              ),
              style: const TextStyle(color: Colors.black),
            );
          }),
        ),
        actions: [
          Obx(() => TextButton(
            onPressed: controller.searchText.value.isNotEmpty
                ? () {
              controller.addSearchHistory(controller.searchText.value);
              // Navigate to search result page
            }
                : null,
            child: Text(
              '搜索',
              style: TextStyle(
                color: controller.searchText.value.isNotEmpty ? Colors.black : Colors.grey,
              ),
            ),
          )),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.only(left: 16, right: 16),
        child: Obx(() {
          final searchHistory = controller.searchHistory;
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Text(
                    '搜索历史',
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
                  ),
                  TextButton(
                    onPressed: () => controller.clearSearchHistory(),
                    child: const Text('清除', style: TextStyle(color: Colors.red)),
                  ),
                ],
              ),
              if (searchHistory.isNotEmpty)
                Wrap(
                  spacing: 8.0,
                  runSpacing: 8.0,
                  children: searchHistory.map((keyword) {
                    return GestureDetector(
                      onTap: () => controller.updateSearchText(keyword),
                      child: Chip(
                        // 边框
                        side: BorderSide(color: Colors.black12),
                        // 高度
                        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                        label: Text(keyword),
                        backgroundColor: Colors.white54,
                        deleteIcon: const Icon(Icons.close, size: 14),
                        onDeleted: () => controller.removeSearchHistory(keyword),
                      ),
                    );
                  }).toList(),
                ),
              if (searchHistory.isEmpty)
                const Center(
                  child: Text(
                    '暂无搜索历史',
                    style: TextStyle(color: Colors.grey),
                  ),
                ),
            ],
          );
        }),
      ),
    );
  }
}
